<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>好友留言板</title>
    <script src="https://cdn.tailwindcss.com"></script>
    <link href="https://cdn.jsdelivr.net/npm/font-awesome@4.7.0/css/font-awesome.min.css" rel="stylesheet">
    
    <style>
        .message-item {
            transition: transform 0.2s ease, box-shadow 0.2s ease;
        }
        .message-item:hover {
            transform: translateY(-2px);
            box-shadow: 0 4px 12px rgba(0,0,0,0.1);
        }
    </style>
</head>
<body class="bg-gray-50 min-h-screen">
    <div class="container mx-auto px-4 py-8 max-w-3xl">
        <!-- 标题区域 -->
        <header class="text-center mb-8">
            <h1 class="text-3xl font-bold text-gray-800 mb-2">好友留言板</h1>
            <p class="text-gray-600">留下你的祝福或想法吧</p>
        </header>
        
        <!-- 留言表单 -->
        <div class="bg-white rounded-lg shadow-md p-6 mb-8">
            <h2 class="text-xl font-semibold mb-4 text-gray-700">写下留言</h2>
            <form id="message-form">
                <div class="mb-4">
                    <label for="name" class="block text-gray-600 mb-1">你的名字</label>
                    <input type="text" id="name" class="w-full px-4 py-2 border border-gray-300 rounded-lg focus:outline-none focus:ring-2 focus:ring-blue-500" placeholder="请输入你的名字" required>
                </div>
                <div class="mb-4">
                    <label for="message" class="block text-gray-600 mb-1">留言内容</label>
                    <textarea id="message" rows="3" class="w-full px-4 py-2 border border-gray-300 rounded-lg focus:outline-none focus:ring-2 focus:ring-blue-500" placeholder="有什么想对我说的..." required></textarea>
                </div>
                <button type="submit" class="bg-blue-600 hover:bg-blue-700 text-white px-4 py-2 rounded-lg transition-colors">
                    <i class="fa fa-paper-plane mr-1"></i> 发送留言
                </button>
            </form>
        </div>
        
        <!-- 留言列表 -->
        <div>
            <h2 class="text-xl font-semibold mb-4 text-gray-700 flex items-center">
                <i class="fa fa-comments-o mr-2"></i> 留言列表
                <span id="message-count" class="ml-2 text-sm bg-gray-200 text-gray-700 px-2 py-0.5 rounded-full">0 条留言</span>
            </h2>
            
            <div id="messages-container" class="space-y-4">
                <!-- 留言会通过JS动态添加到这里 -->
                <div class="text-center py-12 text-gray-500 bg-white rounded-lg shadow-sm">
                    <i class="fa fa-envelope-o text-4xl mb-3 opacity-30"></i>
                    <p>还没有留言，快来写下第一条吧！</p>
                </div>
            </div>
        </div>
    </div>

    <footer class="bg-gray-800 text-white text-center py-4 mt-12">
        <p>好友留言板 &copy; 2023</p>
    </footer>

    <script>
        // DOM元素
        const messageForm = document.getElementById('message-form');
        const nameInput = document.getElementById('name');
        const messageInput = document.getElementById('message');
        const messagesContainer = document.getElementById('messages-container');
        const messageCount = document.getElementById('message-count');
        
        // 从本地存储加载留言
        let messages = JSON.parse(localStorage.getItem('friendMessages')) || [];
        
        // 初始化页面
        renderMessages();
        updateMessageCount();
        
        // 表单提交事件
        messageForm.addEventListener('submit', (e) => {
            e.preventDefault();
            
            // 获取表单数据
            const name = nameInput.value.trim();
            const content = messageInput.value.trim();
            
            if (name && content) {
                // 创建新留言对象
                const newMessage = {
                    id: Date.now(), // 使用时间戳作为唯一ID
                    name: name,
                    content: content,
                    time: new Date().toLocaleString() // 格式化时间
                };
                
                // 添加到留言列表
                messages.unshift(newMessage); // 新增留言放在最前面
                
                // 保存到本地存储
                localStorage.setItem('friendMessages', JSON.stringify(messages));
                
                // 重新渲染留言列表
                renderMessages();
                updateMessageCount();
                
                // 重置表单
                messageForm.reset();
                
                // 聚焦到名字输入框
                nameInput.focus();
            }
        });
        
        // 渲染留言列表
        function renderMessages() {
            if (messages.length === 0) {
                messagesContainer.innerHTML = `
                    <div class="text-center py-12 text-gray-500 bg-white rounded-lg shadow-sm">
                        <i class="fa fa-envelope-o text-4xl mb-3 opacity-30"></i>
                        <p>还没有留言，快来写下第一条吧！</p>
                    </div>
                `;
                return;
            }
            
            // 清空容器
            messagesContainer.innerHTML = '';
            
            // 添加所有留言
            messages.forEach(message => {
                const messageElement = document.createElement('div');
                messageElement.className = 'bg-white rounded-lg shadow-sm p-4 message-item';
                messageElement.innerHTML = `
                    <div class="flex justify-between items-start mb-2">
                        <h3 class="font-semibold text-gray-800">${message.name}</h3>
                        <span class="text-xs text-gray-500">${message.time}</span>
                    </div>
                    <p class="text-gray-600">${message.content}</p>
                    <div class="mt-3 pt-3 border-t border-gray-100 flex justify-end">
                        <button class="delete-btn text-red-500 hover:text-red-700 text-sm flex items-center" data-id="${message.id}">
                            <i class="fa fa-trash-o mr-1"></i> 删除
                        </button>
                    </div>
                `;
                
                messagesContainer.appendChild(messageElement);
            });
            
            // 为删除按钮添加事件监听
            document.querySelectorAll('.delete-btn').forEach(btn => {
                btn.addEventListener('click', (e) => {
                    const messageId = parseInt(e.currentTarget.getAttribute('data-id'));
                    deleteMessage(messageId);
                });
            });
        }
        
        // 删除留言
        function deleteMessage(id) {
            if (confirm('确定要删除这条留言吗？')) {
                // 过滤掉要删除的留言
                messages = messages.filter(message => message.id !== id);
                
                // 保存到本地存储
                localStorage.setItem('friendMessages', JSON.stringify(messages));
                
                // 重新渲染留言列表
                renderMessages();
                updateMessageCount();
            }
        }
        
        // 更新留言计数
        function updateMessageCount() {
            messageCount.textContent = `${messages.length} 条留言`;
        }
    </script>
</body>
</html>
